import React from 'react'
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import '@/components/mobileindex.less'
import conf from '@/config'
class WebIndex extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      contactBtnClass: 'contact-list',
      btnImgClass: 'img-btn add-img'
    }
    this.setContactBtnClass = this.setContactBtnClass.bind(this)
  }
  setContactBtnClass () {
    if (this.state.contactBtnClass.indexOf('open') > -1) {
      this.setState({
        contactBtnClass: 'contact-list close',
        btnImgClass: 'img-btn add-img'
      })
    } else {
      this.setState({
        contactBtnClass: 'contact-list open',
        btnImgClass: 'img-btn close-img'
      })
    }
  }
  render() {
    const { contactBtnClass, btnImgClass } = this.state
    return (
      <div className="mobile-main">
        <Header/>
        <div className={contactBtnClass}>
          <a href={conf.channel.twitter}><img src="/static/head/twitter.png" /></a>
          <a href={conf.channel.facebook}><img src="/static/head/facebook.png" /></a>
          <a href={conf.channel.instagram}><img src="/static/head/instagram.png"/></a>
          <a href={conf.channel.snapchat}><img src="/static/head/snapchat.png" /></a>
          {/* <a href={conf.channel.email}><img src="/static/head/email.png" /></a> */}
          {/* <a href={conf.channel.telegram}><img src="/static/head/telegram.png" /></a> */}
        </div>
        <div className={btnImgClass} onClick={this.setContactBtnClass}></div>
        <div>
          <div className="banner">
            <div className="header">
              <img src="/static/index/m_logo.png" />
            </div>
            <p className="big-title mar-top-120">BEST MOBILE</p>
            <p className="little-title"><span className="opacity-6">READ A HUGE AMOUNT OF QUALITY COMICS FOR FREE</span></p>
            <p className="big-title">COMIC BOOK</p>
            <div className="down-item" >
              <a href={conf.googlePlay} ><img src="/static/index/andriod.png" /></a>
              {/* <a href={conf.appStore} ><img src="/static/index/ios.png" /></a> */}
            </div>
          </div>
          <div className="project-list">
            <p className="new-world" >OPEN A NEW WORLD</p>
            <p className="collection" >COLLECTION OF THE MOST POPULAR ORIGINAL COMIC BOUTIQUE</p>
            <img src="/static/index/m_list.jpg" className="" />
            <div className="tag-item">
              <div className="item" >Actuon</div>
              <div className="item adventure" >Adventure</div>
              <div className="item youth" >Youth</div>
            </div>
          </div>
        </div>
        <Footer />
        <style global jsx>
          {`
            body {
              width: 100%;
              max-width: 750px;
            }
         `}
        </style>
      </div>
    )
  }
}

export default WebIndex
